import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import {
  ElCard,
  ElFormItem,
  ElInput,
  ElMessage,
  ElButton,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElDatePicker
} from 'element-plus'
import styles from './index.module.scss'
import AliIcon from '~/components/AliIocn'
import dayjs from 'dayjs'

export default defineComponent(function MonitorEventData() {
  const store = useStore()
  const formValues = reactive<any>({
    keyWord: '',
    current: 1,
    size: 15
  })
  const state = reactive<any>({
    exportVisible: false,
    eventOpt: [],
    treeData: [{ label: 'Level one 1', children: [{ label: 'Level one 2', children: [] }] }],
    list: [],
    total: 0,
    times: []
  })
  //  列表数据
  const index = async () => {
    try {
      const { data } = await store.dispatch('event/EventListPageGet', formValues)
      state.list = data.records
      state.total = data.total
    } catch (error) {}
  }
  //  每页数量
  const onSizeChange = (value: any) => {
    formValues.size = value
    index()
  }
  //  分页
  const onCurrentChange = (value: any) => {
    formValues.current = value
    index()
  }
  //  搜索
  const handleSearchList = () => {
    formValues.current = 1
    index()
  }
  //  时间限制
  const disabledDate = (time: any) => {
    const cur = new Date().getTime()
    const three = 30 * 24 * 3600 * 1000
    const threeMonths = cur - three
    return time.getTime() > Date.now() || time.getTime() < threeMonths
  }
  // 按回车搜索列表
  const handleKeyDownEnterSubmitForm = (evt: Event | KeyboardEvent) => {
    if ((evt as KeyboardEvent).key === 'Enter') {
      if (formValues.keyWord!?.length < 3) {
        ElMessage.error('关键字输入太少，无法匹配到有效数据')
        // return
      }
      // proSaasTableRef.value!?.toSearch()
    }
  }
  // 清空搜索
  const clearSearchTable = async () => {
    setTimeout(() => {
      // proSaasTableRef.value!?.toSearch()
    }, 100)
  }
  // 打开导出弹框
  const handleChangeExportModal = () => {
    state.exportVisible = !state.exportVisible
  }

  onMounted(() => {
    formValues.beginHappenTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
    formValues.endHappenTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    state.times = [formValues.beginHappenTime, formValues.endHappenTime]
    index()
  })

  return () => {
    const props = {
      onChange: (value: any) => {
        if (value) {
          formValues.beginHappenTime = value[0]
          formValues.endHappenTime = value[1]
        } else {
          delete formValues.beginHappenTime
          delete formValues.endHappenTime
        }
        formValues.current = 1
        index()
      }
    }
    return (
      <ElCard>
        <div>
          <div class={styles['card-form']}>
            {/* <ElFormItem key="times" prop="times">
              <ElDatePicker
                v-model={formValues.keyWord}
                start-placeholder="事件发生开始时间"
                end-placeholder="事件发生结束时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
              />
            </ElFormItem>
            &nbsp;&nbsp; */}
            <ElFormItem key="keyWord" prop="keyWord" label="">
              <ElInput
                v-model={formValues.keyWord}
                placeholder="关键字"
                clearable
                onKeydown={handleKeyDownEnterSubmitForm}
                onClear={clearSearchTable}
              />
            </ElFormItem>
            &nbsp;&nbsp;
            <ElFormItem key="times" prop="times">
              <ElDatePicker
                v-model={state.times}
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                disabled-date={disabledDate}
                {...props}
              />
            </ElFormItem>
            &nbsp;&nbsp;
            <ElButton type="primary" onClick={handleSearchList}>
              <AliIcon type="icon-sousuo" />
              &nbsp; 搜索
            </ElButton>
            <ElButton
              type="primary"
              plain
              onClick={async () => {
                handleSearchList()
              }}
            >
              <AliIcon type="icon-zhongzhi" />
              &nbsp; 重置
            </ElButton>
          </div>
          <div class={styles['card-tree-table']}>
            {/* <div class={styles['card-tree']}>
              <ElTree
                data={state.treeData}
                props={{
                  children: 'children',
                  label: 'label'
                }}
              />
            </div> */}
            <div class={styles['card-table']}>
              <div class={styles['card-table-s']}>
                <ElButton type="success" onClick={handleChangeExportModal}>
                  <AliIcon type="icon-daochu" />
                  &nbsp; 导出
                </ElButton>
              </div>
              <ElTable data={state.list}>
                <ElTableColumn prop="happenTime" width={180} label="事件发生时间" />
                <ElTableColumn prop="createTime" label="事件上报时间" />
                <ElTableColumn prop="name" label="回路监控箱名称" />
                <ElTableColumn prop="loopName" label="开关" />
                <ElTableColumn prop="phase" label="相位" />
                <ElTableColumn prop="date" label="零火线属性" />
                <ElTableColumn prop="eventName" label="事件名称" />
                <ElTableColumn prop="eventLevel" label="事件等级" />
                <ElTableColumn prop="eventStatusCh" label="事件内容" />
                <ElTableColumn prop="eventName" label="警报当前值" />
              </ElTable>
              <div style="height: 10px;"></div>
              <ElPagination
                v-model:currentPage={formValues.current}
                v-model:pageSize={formValues.size}
                layout="total, sizes, prev, pager, next, jumper"
                background={true}
                small={true}
                total={state.total}
                onSize-change={onSizeChange}
                onCurrent-change={onCurrentChange}
              />
            </div>
          </div>
        </div>
      </ElCard>
    )
  }
})
